<template>
  <div class="box">
    <div class="top">
      <van-nav-bar title="套卷练习" left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="18" @click-right="onClickRight" />
        </template>
      </van-nav-bar>
    </div>

    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>

    <div>
      <van-empty  
        class="custom-image"
        image="https://wap.365msmk.com/img/empty.0d284c2e.png"
        description="请稍后，套卷正在赶来的路上哦"
      />
    </div>
  </div>
</template>

<script>
import { Icon, NavBar, DropdownMenu, DropdownItem,Empty } from "vant";

export default {
  components:{
    [Icon.name]:Icon,
    [NavBar.name]:NavBar,
    [DropdownMenu.name]:DropdownMenu,
    [DropdownItem.name]:DropdownItem,
    [Empty.name]:Empty
  },
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 }
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" }
      ]
    };
  },
  mounted() {},
  methods: {
    onClickLeft() {
      window.history.back();
    },
    onClickRight() {}
  }
};
</script>

<style scoped>
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>